<template>
	<view class="createGroupBuy">
		<view class="part">
			<view class="partTit">团购介绍</view>
			<view class='partVal'> 
				<view class="iptBox">
					<input type="text" v-model='title' placeholder='请输入团购活动标题'>
				</view>
				<view class="iptBox">
					<textarea v-model='intro' placeholder="请输入团购活动介绍"/>
				</view>
			</view>
		</view>
		<view class="part">
			<view class="partTit">团购图片</view>
			<view class='partVal'>
				<view class="imgs dFlex jStart_aStart fWap">
					<view class="imgOne imgPublic" v-for="(item,index) in pt_img" :key='index'>
						<image :src="item" mode="widthFix"></image>
						<view class="del imgPublic" @tap.stop='delImg(index)' >
							<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/del.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="upTool imgPublic" v-if="pt_img.length<1" @tap='upImg'>
						<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/upTool.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<!-- <view class="otherTool dFlex jBetween_aCenter">
				<text>是否可冷藏</text>
				<switch v-model='canLc' style="transform: scale(0.8);"/>
			</view> -->
		</view> 
		<view class="part">
			<view class="partTit dFlex jBetween_aCenter">
				<text>团购商品</text>
				<text class='daoru' @click="chooseShop">商品库导入</text>
			</view>
			<view class='partVal'>
				<view class='shops' v-if='goods.length'>
					<view class="shopOne dFlex jStart_aStart" v-for="(item,index) in goods" :key='index'>
						<view class="shopImg imgPublic">
							<image :src="item.main_img" mode="widthFix"></image>
						</view> 
						<view class="shopInfo">
							<view class="name">{{item.title}}</view>
							<view class="prices dFlex jStart_aCenter">
								<view class='newPrice'>￥<text>{{item.price}}</text></view>
								<view class='oldPric'>￥{{item.old_price}}</view>
							</view>
							<view class='yjs dFlex jStart_aCenter'>
								<view class='yj'>佣金:￥{{item.commission.toFixed(2)}}</view>
								<view class='stock'>库存：{{item.stock}}</view>
							</view>
							<view class="del" @click='delShop(index)'>删除</view>
						</view>
					</view>
				</view>
				<view class='shops empty imgPublic' v-else>
					<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/empty.png" mode="widthFix"></image>
				</view>
				<view class="otherTool dFlex jBetween_aCenter">
					<view class="count">
						拼团人数限制
						<text>不填则不限</text>
					</view>
					<view class="ipt dFlex jEnd_aCenter">
						<input type="number" v-model='lowest_user' placeholder="请输入人数" style="text-align: right;"> 人
					</view>
				</view>
			</view>
		</view> 
		<view class="part">
			<view class="partTit">团购时间</view>
			<view class='partVal'>
				<view class="line dFlex jBetween_aCenter">
					<text class="lineTit">开始时间</text>
					<view class='lineVal dFlex jEnd_aCenter' @click="setTime('start_time_flag')">
						<view class="ipt" >
							<u-picker @confirm='chooseTime($event,"start_time")' :safe-area-inset-bottom='true' v-model="start_time_flag" mode="time" :params="{ year: true, month: true, day: true, hour: true, minute: true }"></u-picker>
							<input type="text" placeholder='请选择开始时间' disabled v-model='start_time' >
						</view>
					</view>
				</view>
				<view class="line dFlex jBetween_aCenter">
					<text class="lineTit">结束时间</text> 
					<view class='lineVal dFlex jEnd_aCenter' @click="setTime('end_time_flag')">
						<view class="ipt" >
							<u-picker @confirm='chooseTime($event,"end_time")' :safe-area-inset-bottom='true' v-model="end_time_flag" mode="time" :params="{ year: true, month: true, day: true, hour: true, minute: true, }"></u-picker>
							<input type="text" placeholder='请选择结束时间' v-model='end_time' disabled>
						</view>
					</view>
				</view>
			</view>
		</view> 
		<view class="seat"></view>
		<view class="loginBtn" @click="createActive">{{id?'保存团购活动':'创建团购活动'}}</view> 
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				id:'',
				title:'',
				intro:'',
				start_time:"",
				start_time_flag:false,
				end_time_flag:false,
				end_time:'',
				lowest_user:"2",
				goods:[],
				pt_img:[],
			};
		},
		onLoad(e){
			this.id = e.id ? e.id : ''; 
			if(e.id){
				uni.setNavigationBarTitle({
					title:'编辑团购',
				})
				this.initData();
			}
			if(e.cpId){
				this.initData(e.cpId);
			}
			if(uni.getStorageSync('readyShop')){
				this.goods = uni.getStorageSync('readyShop');
				console.log(this.goods);
				// uni.removeStorageSync('readyShop');
			}
		},
		onShow(){
			console.log(this.goods);
		},
		methods:{
			initData(cpId){
				this.tool.getData('/api/pintuan/getPintuanInfo',{
					pt_id:cpId?cpId:this.id,
					type:cpId ? '2' : '1',
				},"",this).then(res=>{
					if(res){
						this.goods = res.goods_list.map((item)=>{
							return{
								id:item.goods_id,
								title:item.goods_title,
								main_img:item.goods_main_img,
								price:item.goods_pt_price,
								old_price:item.goods_old_price,
								stock:item.goods_set_stock,
								commission:parseFloat(item.goods_pt_price) * parseFloat(item.service_rate) / 100,
							}
						});
						if(this.id){
							this.title = res.title;
							this.intro = res.notice;
							this.pt_img = [res.pt_img];
							this.lowest_user = res.lowest_user;
							
							this.start_time = res.start_time_text;
							this.end_time = res.end_time_text;
						}
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 创建活动
			createActive(){
				if(!this.title){
					uni.showToast({
						title:'请输入活动标题',
						icon:"none"
					})
					return;
				}
				if(!this.intro){
					uni.showToast({
						title:'请输入活动介绍',
						icon:"none"
					})
					return;
				}
				if(!this.pt_img.length){
					uni.showToast({
						title:'至少上传一张照片',
						icon:"none"
					})
					return;
				}
				if(!this.goods.length){
					uni.showToast({
						title:'至少选择一件商品',
						icon:"none"
					})
					return;
				}
				if(!this.start_time){
					uni.showToast({
						title:'请设置活动开始时间',
						icon:"none"
					})
					return;
				}
				if(!this.end_time){
					uni.showToast({
						title:'请设置活动结束时间',
						icon:"none"
					})
					return;
				}
				if(new Date(this.end_time).getTime() <= new Date(this.start_time).getTime()){
					uni.showToast({
						title:'结束时间不能小于开始时间',
						icon:"none"
					})
					return;
				}
				this.tool.getData('/api/Pintuan/savePintuanAct',{
					id:this.id,
					title:this.title,
					intro:this.intro,
					lowest_user:this.lowest_user,
					start_time:parseInt(new Date(this.start_time).getTime() / 1000),
					end_time:parseInt(new Date(this.end_time).getTime() / 1000),
					gids:this.goods.map((item)=>{return item.id}).join(','),
					pt_img:this.pt_img.join(','),
				}).then(res=>{
					console.log(res);
					if(res){
						uni.showToast({
							title:'信息保存成功',
							icon:"success"
						})
						setTimeout(()=>{
							uni.redirectTo({
								url:'./PTList'
							})
						},1650)
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 删除商品
			delShop(index){
				this.goods.splice(index,1);
			},
			// 商品库 
			chooseShop(){
				uni.navigateTo({
					url:'/my/warehouse?status=1&selShop='+(this.id?JSON.stringify(this.goods):''),
				})
			},
			// 设置时间
			setTime(key){
				this[key] = true;
			},
			// 选择时间
			chooseTime(event,key){
				this[key] = event.year + '-' + event.month + '-' + event.day + ' ' + event.hour+':'+event.minute;
			},
			delImg(index){
				this.pt_img.splice(index,1);
			},
			upImg(){
				let len = 9-this.pt_img.length?9-this.pt_img.length:0;
				if(len){
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album','camera'], //从相册选择
						success:(res)=>{
							if(res.tempFilePaths.length){
								res.tempFilePaths.map((item,index)=>{
									this.tool.upImg(item).then(thumb=>{
										if(thumb){
											this.pt_img.push(thumb.fullurl);
										}
									}).catch(err=>{
										console.log(err);
									})
								})
							}
						},
						fail:(err)=>{
							uni.showToast({
								title:"图片选择失败",
								icon:"none"
							})
						},
						complete:()=>{
							
						},
					})
				}else{
					uni.showToast({
						title:'最多上传9张图片',
						icon:"none"
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.loginBtn{
		width: 74.4%;
		left: 12.8%;
		padding: 22rpx 0;
		background: linear-gradient(180deg, #FC9700 0%, #FF5000 100%);
		position: fixed;
		bottom: 32px;
		text-align: center;
		border-radius: 40px;
		color: white;
		font-size: 16px;
	}
	.part{
		.partVal{
			width:100%;
			.line{
				padding: 5px 0;
				box-sizing: border-box;
				.lineTit{
					// font-weight: bold;
					width: 22%;
					text-align: left;
					margin-right: 10px;
				}
				.lineVal{
					flex: 1;
					.tx{
						width: 40px;
						height: 40px;
						image{
							width: 40px;
							height: 40px;
							border-radius: 50%;
						}
					}
					.ipt{
						flex: 1;
						input{
							text-align: right;
						}
					}
					.rightIcon{
						width: 16px;
						margin-left: 4px;
					}
				}
			}
			.shops{
				width:100%;
				.shopOne{
					.shopInfo{
						.del{
							color:#FE5400;
							position: absolute;
							right:0;
							font-size: 14px;
							bottom: 6px;
						}
						.yjs{
							.stock{
								color:#808080;
							}
							.yj{
								width:max-content;
								background:#FE5400;
								color:white;
								border-radius: 50px;
								padding: 4px;
								margin-right:12px;
							}
							font-size:12px;
							width:100%;
							margin-top:10px;
						}
						.prices{
							.oldPric{
								text-decoration: line-through;
								margin-left:12px;
								color:#808080;
							}
							.newPrice{
								color:#FE5400;
								text{
									font-size:14px;
								}
							}
							font-size:12px;
							width:100%;
						}
						.name{
							width:100%;
							word-break: break-all;
							overflow: hidden;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							margin-bottom: 6px;
						}
						width: calc(100% - 92px);
						position:relative;
					}
					.shopImg{
						width:80px;
						height:80px;
						border-radius: 4px;
						overflow: hidden;
						margin-right: 12px;
					}
					width:100%;
					padding-bottom: 5px;
					margin-bottom: 10px;
				}
				width:100%;
			}
			.otherTool{
				width: 100%;
				.ipt{
					width:100px;
					margin-left: 12px;
				}
				.count{
					text{
						font-size: 12px;
						display: inline-block;
						margin-left: 4px;
					}
				}
			}
			.imgs{
				width: 100%;
				padding:12px 0;
				.upTool{
					width: 75px;
					height: 75px;
					margin-right:0;
				}
				.imgOne{
					width: 75px;
					height: 75px;
					border-radius: 4px;
					margin-right: 8px;
					margin-bottom: 8px;
					position: relative;
					overflow:hidden;
					image{
						width: 100%;
						height: 100%;
					}
					.del{
						width: 16px;
						height: 16px;
						position: absolute;
						top: 0;
						right: 0;
						image{
							width: 100%;
							height: 100%;
						}
					}
				}
				.imgOne:nth-child(4n + 4){
					margin-right: 0;
				}
			}
			.iptBox{
				width:100%;
				margin-bottom:8px;
				border:1px solid #808080;
				padding:4px 8px;
				border-radius: 4px;
			}
		}
		.partTit{
			width:100%;
			font-weight: bold;
			margin-bottom:12px;
			.daoru{
				font-size:12px;
				color:#999999;
				font-weight:bold;
			}
		}
		width:100%;
		padding:12px;
		box-sizing: border-box;
		background:white;
		margin-bottom: 12px;
	}
	page{
		background:#f8f8f8;
	}
</style>
